<template>
    <div>
        <!--<div v-on:click="dodo">-->
        <!--<button v-on:click="doThis">阻止单击事件继续传播</button>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div>-->
        <div @click="showContent">这里是标题</div>
        <div :class="['slot', {'show_text': showText}]">

        </div>
        <slot class="tx">The 2018 International Symposium on Big Data and Applied Statistics（ISBDAS2018） will be held on November 2-4,2018 in Guangzhou, China. ISBDAS 2018 is to bring together innovative academics and industrial experts in the field of Big Data and Applied Statistics to a common forum. The primary goal of the conference is to promote research and developmental activities in Big Data and Applied Statistics and another goal is to promote scientific information interchange between researchers, developers, engineers, students, and practitioners working all around the world. The conference will be held every year to make it an ideal platform for people to share views and experiences in Big Data and Applied Statistics and related areas
        </slot>
        <!--<div class="hello relatedInstance">-->
        <!--<ul>-->
        <!--<li-->
        <!--v-for="(list, index) in list"-->
        <!--:class="{'active':ind === index}"-->
        <!--@click="changeBgc(index)">{{list}}</li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--<div id="example-2">-->
        <!--&lt;!&ndash; `greet` 是在下面定义的方法名 &ndash;&gt;-->
        <!--<div @click="greet" class="green" name="ge">上面-->
        <!--<div>-->
        <!--<div>里面</div>-->
        <!--<div>里面</div>-->
        <!--<div>里面</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <div class="app">
            <button @click="showCont" value="0">0点击隐藏再点显示</button>
            <div v-if="showl.data[0].show">hello world</div>
        </div>
        <div class="app">
            <button @click="showCont" value="1">1点击隐藏再点显示</button>
            <div v-if="showl.data[1].show">hello world</div>
        </div>
        <div class="app">
            <button @click="showCont" value="2">2点击隐藏再点显示</button>
            <div v-if="showl.data[2].show">hello world</div>
        </div>
        <div class="app">
            <button @click="showCont" value="3">3点击隐藏再点显示</button>
            <div v-if="showl.data[3].show">hello world</div>
        </div>
        <div class="app">
            <button @click="showCont" value="4">4点击隐藏再点显示</button>
            <div v-if="showl.data[4].show">hello world</div>
        </div>
        <div class="app">
            <button @click="showCont" value="5">5点击隐藏再点显示</button>
            <div v-if="showl.data[5].show">hello world</div>
        </div>
        <div>{{showl.data[1].show}}</div>
    </div>
</template>

<script>
    export default {
        name: "home",
        data(){
            return {
                name:'ssss',
                show:false,
                // list: ['苹果', '香蕉', '菠萝', '芒果'],
                // ind: '',
                showText: false,
                showa:true,
                showl:{
                    data: [
                        {index: 0, show: false},
                        {index: 1, show: false},
                        {index: 2, show: false},
                        {index: 3, show: false},
                        {index: 4, show: false},
                        {index: 5, show: false},
                    ]
                }
            }
        },
        methods: {
            showCont:function(event){
                let showvalue = event.target.value;
                console.log(this.showl.data[2].show);
                this.showl.data[showvalue].show=!this.showl.data[showvalue].show
                let that =this;
                this.show = !this.show;
                console.log(this.showl);
                console.log(showvalue);
                console.log(this.showl.data.length);
                let  showl =this.showl.data.length;
                for (let i=0;i<showl;i++) {
                    console.log([i])
                }
            },
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                console.log('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    console.log(event.target.index)
                    console.log(event.target.children)
                }
            },
            showContent(){
                this.showText = !this.showText;
            },
            changeBgc: function (index) {
                this.ind = index
            },
            // doThis: function () {
            //   alert("noclick");
            // },
            // dodo: function () {
            //   alert("dodo");
            // }
        }

    }
</script>

<style scoped>
    #app{
        transition: all .5s;
    }
    .tx{
        display: none;
    }
    .showText .tx{
        display: block;
    }
    .slot{
        width: 100%;
        height: 0;
        transition: all 4s;
    }
    .show_text{
        height: 100%;
    }
</style>

